<!--
 * @Description: 资讯分类
 * @Author: zzj
 * @Date: 2021-09-26 16:50:08
 * @LastEditors: zzj
 * @LastEditTime: 2021-09-26 18:35:34
-->
<template>
	<div class="category">
		栏目管理
		<div>
			{{category}}
			<form v-on:submit.prevent="submitHandler" 
			:v-model="category">
				名称：<input type="text" v-model="category.name">
				序号：<input type="text" v-model="category.no">
				<input type="submit">
			</form>

			<table style="width:100%">
				<thead>
					<tr>
						<td>编号</td>
						<td>名称</td>
						<td>序号</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in categories" v-bind:key="item.id">
						<td>{{index+1}}</td>
						<td>{{item.name}}</td>
						<td>{{item.no}}</td>
						<td>
							<a href="" v-on:click.prevent="delHandler(item)">删除 </a>
							<a href="" v-on:click.prevent="editHandler(item)">修改 </a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>
<script>
import {get,post} from "../utils/request"
export default {
	data(){
		return {
			categories:[],
			category:{}
		}
	},
	methods:{
		//修改
		editHandler(row){
			this.category = Object.assign({},row);
		},

		//提交
		submitHandler(){
			let url = "/category/saveOrUpdate"
			post(url,this.category).then(resp =>{
				alert(resp.message);
				this.category = {};
				this.loadCategories();
			})
		},

		//删除
		delHandler({id}){
			let url = "/category/deleteById"
			get(url,{id}).then(resp=>{
				alert(resp.message);
				this.loadCategories();
			})
		},

		//查询
		loadCategories(){
			let url = "/category/findAll"
			get(url).then(resp => {
				this.categories = resp.data;
			})
		}
	},
	mounted(){
		this.loadCategories();
	}
}
</script>